<template>
  <div @click="clickLabel()" class="div_item" :class="arrColor[getNumber()]">
    <i v-if="closeIcon" class="i_icon"></i>
    <slot>标签内容</slot>
  </div>
</template>
<script>
export default {
  props: {
    closeIcon:{
      default: false
    }
  },
  data () {
    return {
      arrColor: ["pink", "purple", "green", "yellow"]
    }
  },
  methods: {
    getNumber(){
      return Math.round(Math.random()*3);
    },
    clickLabel(){
      this.$emit("removetag");
    }
  }
}
</script>
<style lang="less" scoped>
.div_item {
  line-height: .3rem;
  float: left;
  margin: 0 .15rem .1rem 0;
  padding: 0 .1rem;
  background: #828282;
  font-size: .14rem;
  color: white;
  border-radius: .04rem;
  position: relative;
  .i_icon {
    display: block;
    width: .18rem;
    height: .18rem;
    top:-.05rem;
    right: -.05rem;
    position: absolute;
    background: url('../../assets/img/person/icon_cancel04@3x.png') center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
.pink {
  background: #EFABAB;
  color: #9B3131;
}
.purple {
  background: #A8AED4;
  color: #2667B2;
}
.green {
  background: #AEE0C7;
  color: #1C7505;
}
.yellow {
  background: #FCE5BA;
  color: #C79141;
}

</style>


